﻿<!DOCTYPE html>
<html>
<!--命名空间需要修改-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--商品详情页</title>
    <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-item.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-zoom.css"/>
    <link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css"/>

    <style type="text/css">
        .goods-intro-list li {
            display: inline-block;
            width: 300px;
        }

        .Ptable {
            margin: 10px 0;
        }

        .Ptable-item {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
            border-bottom: 1px solid #eee;
        }

        .Ptable-item h3 {
            width: 110px;
            text-align: right;
        }

        .Ptable-item h3, .package-list h3 {
            font-weight: 400;
            font-size: 12px;
            float: left;
        }

        h3 {
            display: block;
            font-size: 1.17em;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            font-weight: bold;
        }

        .Ptable-item dl {
            margin-left: 110px;
        }

        dl {
            display: block;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
        }

        .Ptable-item dt {
            width: 160px;
            float: left;
            text-align: right;
            padding-right: 5px;
        }

        .Ptable-item dd {
            margin-left: 210px;
        }

        dd {
            display: block;
            -webkit-margin-start: 40px;
        }

        .package-list {
            padding: 12px 0;
            line-height: 220%;
            color: #999;
            font-size: 12px;
            margin-top: -1px;
        }

        .package-list h3 {
            width: 130px;
            text-align: right;
        }

        .package-list p {
            margin-left: 155px;
            padding-right: 50px;
        }
    </style>
    <script th:inline="javascript">
        // const a = /*[[${groups}]]*/ [];
        // const b = /*[[${paramsMap}]]*/ [];
        // const h = /*[[${standardParamsMap}]]*/ [];
        // const c = /*[[${categories}]]*/ [];
        // const d = /*[[${spu}]]*/ {};
        // const e = /*[[${spuDetail}]]*/ {};
        // const f = /*[[${skus}]]*/ [];
        // const g = /*[[${brand}]]*/ {};

        // 定义sku集合 ,数组
        const skus = /*[[${skus}]]*/ [];

        // 规格参数id和name ，对象
        const paramMap = /*[[${paramsMap}]]*/ {};

        // 特有的规格参数集合,字符串
        const specialSpec = JSON.parse(/*[[${spuDetail.specialSpec}]]*/ "");

        // 标准的规格参数value
        const genericSpec = JSON.parse(/*[[${spuDetail.genericSpec}]]*/ "");
        // 标准的规格参数key
        const standardParamsMap = /*[[${standardParamsMap}]]*/ {};

        // spudetail的信息
        const spuDetail = /*[[${spuDetail}]]*/ "";

        const groups = /*[[${groups}]]*/ [];

        // 定义筛选规格参数组的对象,所有的key就是 4 12 13
        // 		 "4":0,
        // 		"12":0,
        // 		"13":0
        const indexes = {};
        Object.keys(paramMap).forEach(key => {
            indexes[key] = 0;
        });

    </script>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载  -->
<div id="itemApp">
    <div id="nav-bottom">
        <ly-top/>
    </div>
    <div class="py-container">
        <div id="item">
            <div class="crumb-wrap">
                <ul class="sui-breadcrumb">
                    <li th:each="category : ${categories}">
                        <a href="#" th:text="${category.name}">手机</a>
                    </li>
                    <li class="active" th:text="${brand.name}">Apple iPhone 6s</li>
                </ul>
            </div>
            <!--product-info-->
            <div class="product-info">
                <div class="fl preview-wrap">
                    <!--放大镜效果-->
                    <div class="zoom">
                        <!--默认第一个预览-->
                        <div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
                        </div>
                        <!--下方的缩略图-->
                        <div class="spec-scroll">
                            <a class="prev">&lt;</a>
                            <!--左右按钮-->
                            <div class="items">
                                <ul>
                                    <li v-for="(image,i) in images" :key="i">
                                        <img :src="image" :bimg="image" onmousemove="preview(this)"/>
                                    </li>
                                </ul>
                            </div>
                            <a class="next">&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="fr itemInfo-wrap">
                    <div class="sku-name">
                        <h4 v-text="sku.title">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
                    </div>
                    <div class="news"><span th:utext="${spu.subTitle}">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</span></div>
                    <div class="summary">
                        <div class="summary-wrap">
                            <div class="fl title"><i>价　　格</i></div>
                            <div class="fl price">
                                <i>¥</i><em v-text="ly.formatPrice(sku.price)">5299.00</em><span>降价通知</span>
                            </div>
                            <div class="fr remark"><i>累计评价</i><em>612188</em></div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>促　　销</i>
                            </div>
                            <div class="fl fix-width">
                                <i class="red-bg">加价购</i>
                                <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
                                    购热销商品</em>
                            </div>
                            intro-detail
                        </div>
                    </div>
                    <div class="support">
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>支　　持</i>
                            </div>
                            <div class="fl fix-width">
                                <em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
                            </div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title">
                                <i>配 送 至</i>
                            </div>
                            <div class="fl fix-width">
                                <em class="t-gray">上海 <span>有货</span></em>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix choose">
                        <div id="specification" class="summary-wrap clearfix">
                            <!--specialSpec根据spuDetail.specialSpec得到也就是specialSpec字段 -->
                            <!--{"4":["香槟金","苍穹灰"],"12":["4GB"],"13":["64GB"]}，K就是4,12,13-->
                            <dl v-for="(v,k) in specialSpec" :key="k">
                                <dt>
                                    <div class="fl title">
                                        <!--刚好对应到param表里generic是0的分别是颜色，内存，存储-->
                                        <i>{{ paramMap[k] }}</i>
                                    </div>
                                </dt>
                                <!--再去循环，str就是具体的值（香槟色  苍穹灰这些）-->
                                <dd v-for="(str,j) in v" :key="j">
                                    <!-- k是4 12 13这些值-->
                                    <!--@click="indexes[k]=j 代表点击属性 indexes[12/13] = 0/1  值里面的索引-->
                                    <!--如果j === indexes[k]代表当前选中也就是true对应点击事件-->

                                    <!--总结：当点击标签的时候,把indexes的值等于属性的下标,-->
                                    <!--     这样样式和是否选中写成和赋值一样的判断就统一显示和不显示了-->
                                    <a href="javascript:;" :class="{selected : j === indexes[k]}" @click="indexes[k]=j">
                                        {{str}}<span v-if="j === indexes[k]" title="点击取消选择">&nbsp;&nbsp; </span>
                                    </a>
                                </dd>
                            </dl>

                        </div>

                        <div class="summary-wrap">
                            <div class="fl title">
                                <div class="control-group">
                                    <div class="controls">
                                        <input autocomplete="off" v-model="num" type="text" disabled value="1"
                                               minnum="1"
                                               class="itxt"/>
                                        <a href="javascript:void(0)" class="increment plus" @click="incr">+</a>
                                        <a href="javascript:void(0)" class="increment mins" @click="decr">-</a>
                                    </div>
                                </div>
                            </div>
                            <div class="fl">
                                <ul class="btn-choose unstyled">
                                    <li>
                                        <a href="javascript:void(0)" target="_blank"
                                           class="sui-btn  btn-danger addshopcar" @click="addCart()">加入购物车</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--product-detail-->
            <div class="clearfix product-detail">
                <div class="fl aside">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li class="active">
                            <a href="#index" data-toggle="tab">
                                <span>相关分类</span>
                            </a>
                        </li>
                        <li>
                            <a href="#profile" data-toggle="tab">
                                <span>推荐品牌</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content tab-wraped">
                        <div id="index" class="tab-pane active">
                            <ul class="part-list unstyled">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>Iphone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="goods-list unstyled">
                                <li>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="/img/_/part01.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="/img/_/part02.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="/img/_/part03.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="/img/_/part02.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                    <div class="list-wrap">
                                        <div class="p-img">
                                            <img src="/img/_/part03.png"/>
                                        </div>
                                        <div class="attr">
                                            <em>Apple苹果iPhone 6s (A1699)</em>
                                        </div>
                                        <div class="price">
                                            <strong>
                                                <em>¥</em>
                                                <i>6088.00</i>
                                            </strong>
                                        </div>
                                        <div class="operate">
                                            <a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div id="profile" class="tab-pane">
                            <p>推荐品牌</p>
                        </div>
                    </div>
                </div>
                <div class="fr detail">
                    <div class="clearfix fitting">
                        <h4 class="kt">选择搭配</h4>
                        <div class="good-suits">
                            <div class="fl master">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <img src="/img/_/l-m01.png"/>
                                    </div>
                                    <em>￥5299</em>
                                    <i>+</i>
                                </div>
                            </div>
                            <div class="fl suits">
                                <ul class="suit-list">
                                    <li class="">
                                        <div id="">
                                            <img src="/img/_/dp01.png"/>
                                        </div>
                                        <i>Feless费勒斯VR</i>
                                        <label data-toggle="checkbox" class="checkbox-pretty">
                                            <input type="checkbox"><span>39</span>
                                        </label>
                                    </li>
                                    <li class="">
                                        <div id=""><img src="/img/_/dp02.png"/></div>
                                        <i>Feless费勒斯VR</i>
                                        <label data-toggle="checkbox" class="checkbox-pretty">
                                            <input type="checkbox"><span>50</span>
                                        </label>
                                    </li>
                                    <li class="">
                                        <div id=""><img src="/img/_/dp03.png"/></div>
                                        <i>Feless费勒斯VR</i>
                                        <label data-toggle="checkbox" class="checkbox-pretty">
                                            <input type="checkbox"><span>59</span>
                                        </label>
                                    </li>
                                    <li class="">
                                        <div id=""><img src="/img/_/dp04.png"/></div>
                                        <i>Feless费勒斯VR</i>
                                        <label data-toggle="checkbox" class="checkbox-pretty">
                                            <input type="checkbox"><span>99</span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                            <div class="fr result">
                                <div class="num">已选购0件商品</div>
                                <div class="price-tit"><strong>套餐价</strong></div>
                                <div class="price">￥5299</div>
                                <button class="sui-btn  btn-danger addshopcar">加入购物车</button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-main intro">
                        <ul class="sui-nav nav-tabs tab-wraped">
                            <li class="active">
                                <a href="#one" data-toggle="tab">
                                    <span>商品介绍</span>
                                </a>
                            </li>
                            <li>
                                <a href="#two" data-toggle="tab">
                                    <span>规格与包装</span>
                                </a>
                            </li>
                            <li>
                                <a href="#three" data-toggle="tab">
                                    <span>售后保障</span>
                                </a>
                            </li>
                            <li>
                                <a href="#four" data-toggle="tab">
                                    <span>商品评价</span>
                                </a>
                            </li>
                            <li>
                                <a href="#five" data-toggle="tab">
                                    <span>手机社区</span>
                                </a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                        <div class="tab-content tab-wraped">
                            <div id="one" class="tab-pane active">
                                <ul class="goods-intro-list unstyled" style="list-style: none;">
                                    <li v-for="(k,v) in genericSpec" :key="v">{{ standardParamsMap[v] }} : {{ k }}</li>
                                </ul>
                                <!--商品详情的图片展示-->
                                <div class="intro-detail" th:utext="${spuDetail.description}">
                                    <!--<img src="/img/_/intro01.png"/>-->
                                    <!--<img src="/img/_/intro02.png"/>-->
                                    <!--<img src="/img/_/intro03.png"/>-->
                                </div>
                            </div>
                            <div id="two" class="tab-pane">
                                <div class="Ptable">
                                    <div class="Ptable-item" v-for="group in groups" :key="group.name">
                                        <h3>{{ group.name }}</h3>
                                        <dl>
                                            <div v-for="p in group.params" :key="p.name">
                                                <dt>{{ p.name }}</dt>
                                                <dd>{{ p.v}}</dd>
                                            </div>

                                            <!--<dt>型号</dt>-->
                                            <!--<dd>CLT-AL00</dd>-->
                                            <!--<dt>入网型号</dt>-->
                                            <!--<dd>CLT-AL00</dd>-->
                                            <!--<dt>上市年份</dt>-->
                                            <!--<dd>2018年</dd>-->
                                            <!--<dt>上市月份</dt>-->
                                            <!--<dd>4月</dd>-->
                                        </dl>
                                    </div>
                                    <!--<div class="Ptable-item">-->
                                    <!--    <h3>基本信息</h3>-->
                                    <!--    <dl>-->
                                    <!--        <dt>机身颜色</dt>-->
                                    <!--        <dd>宝石蓝</dd>-->
                                    <!--        <dt>机身长度（mm）</dt>-->
                                    <!--        <dd>155.0</dd>-->
                                    <!--        <dt>机身宽度（mm）</dt>-->
                                    <!--        <dd>73.9</dd>-->
                                    <!--        <dt>机身厚度（mm）</dt>-->
                                    <!--        <dd>7.8</dd>-->
                                    <!--        <dt>机身重量（g）</dt>-->
                                    <!--        <dd>约180g（含电池）</dd>-->
                                    <!--        <dt>输入方式</dt>-->
                                    <!--        <dd>触控</dd>-->
                                    <!--        <dt>运营商标志或内容</dt>-->
                                    <!--        <dd>无</dd>-->
                                    <!--        <dt>机身材质分类</dt>-->
                                    <!--        <dd>玻璃后盖</dd>-->
                                    <!--    </dl>-->
                                    <!--</div>-->
                                </div>
                                <div class="package-list">
                                    <h3>包装清单</h3>
                                    <p v-text="spuDetail.packingList">手机X1、快速指南X1、华为SuperCharge 充电器X1、三包凭证X1、Type-C
                                        数字耳机X1、Type-C
                                        数据线X1、取卡针X1、TPU保护壳X1、USB Type-C转3.5mm耳机转接线X1（备注：最终以实物为准）</pv-text>
                                </div>

                            </div>
                            <div id="three" class="tab-pane">
                                <p>售后保障</p>
                                <p v-text="spuDetail.afterService"></p>
                            </div>
                            <div id="four" class="tab-pane">
                                <p>商品评价</p>
                            </div>
                            <div id="five" class="tab-pane">
                                <p>手机社区</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--like-->
            <div class="clearfix"></div>
            <div class="like">
                <h4 class="kt">猜你喜欢</h4>
                <div class="like-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-6">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/_/itemlike01.png"/>
                                </div>
                                <div class="attr">
                                    <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>3699.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有6人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-6">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/_/itemlike02.png"/>
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4388.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-6">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/_/itemlike03.png"/>
                                </div>
                                <div class="attr">
                                    <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-6">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/_/itemlike04.png"/>
                                </div>
                                <div class="attr">
                                    <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-6">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/_/itemlike05.png"/>
                                </div>
                                <div class="attr">
                                    <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                        <li class="yui3-u-1-6">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="/img/_/itemlike06.png"/>
                                </div>
                                <div class="attr">
                                    <em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>4088.00</i>
                                    </strong>
                                </div>
                                <div class="commit">
                                    <i class="command">已有700人评价</i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script>
    var itemVm = new Vue({
        el: "#itemApp",
        data: {
            // 上面有注释，从thymeleaf获取到的数据
            ly,
            paramMap,
            specialSpec,
            indexes,  // 已选规格属性的下标
            genericSpec,
            standardParamsMap,
            spuDetail,
            num: 1
        },
        components: {
            lyTop: () => import('/js/pages/top.js')
        },
        // 计算属性
        methods: {
            addCart() {
                // verifyUser是自己定义的方法在common.js里，相当于this.http.get("/auth/verify");
                ly.verifyUser()
                    .then(resp => {
                        // 如果已登录,发送商品id和数量发到后台（其他数据后台去查得到）。加到redis里
                        ly.http.post("/cart", {skuId: this.sku.id, num: this.num}).then(res => {
                            window.location = "http://www.leyou.com/cart.html"
                        })

                    }).catch(() => {
                        // 未登录保存在浏览器本地的localStorage中
                        // 1：先查询本地购物车,localstorage里有数据没。
                        let carts = ly.store.get("LY_CARTS") || [];
                        let cart = carts.find(a => a.skuId === this.sku.id);    // 这个sku.id是页面结算数据的sku,得到当前商品是个json对象
                        if (cart) {  // 如果当前商品存在本地购物车内直接加数量
                            cart.num += this.num
                        } else {
                            // 如果不存在封装购物车数据
                            cart = {
                                skuId: this.sku.id,
                                title: this.sku.title,
                                price: this.sku.price,
                                image: this.sku.images,
                                num: this.num,
                                ownSpec: this.sku.ownSpec  // 规格参数
                            };
                            // 封装好加到购物车数组里
                            carts.push(cart);
                        }
                        ly.store.set("LY_CARTS", carts);    // 放到本地存储localstorage
                        // 跳转
                        window.location.href = "http://www.leyou.com/cart.html";
                    }
                )
            },
            incr() {
                this.num++;
            },
            decr() {
                if (this.num > 1) {
                    this.num--;
                }
            }
        },
        computed: {
            sku() {
                const index = Object.values(this.indexes).join("_"); // 得到选中的下标0_0_0
                return skus.find(s => s.indexes === index) || Object;    // ！！ 通过下标去skus里通过find找对应的sku,如果组合不存在这个sku是没有值的。。
                // 卡在这里1个多小时，问题是不存在的组合images肯定也不存在，点击切换组合的会报错，这里改成获取不到就为Object ，不能返回null  就返回一个空字符串，这样
                // images也是"" 最起码可以选，但是还会报错。。
            },
            // 图片处理值拿第一张
            images() {
                return this.sku.images ? this.sku.images.split(",") : "";
            },
            groups() {
                groups.forEach(group => {
                    group.params.forEach(param => {
                        // 如果是通用属性,加个属性v，把genericSpec里的通用的属性值给他，如果没值显示其他
                        if (param.generic) {
                            param.v = this.genericSpec[param.id] || '其他';
                        } else {
                            // 如果是非标属性，咱们去sku下的ownSpec字段里去拿值，都是根据id对应的取
                            param.v = JSON.parse(this.sku.ownSpec)[param.id]
                        }
                    })

                });
                // 得出的结果就在param属性里加了个值例如：name:"型号" v:"SLA-AL00"
                return groups;
            }

        }
    });
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>


</body>

</html>